<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="area"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
	<view style="text-align: center;margin: 20rpx;">
		<text style="font-size: 40rpx; color: red;">
				开发中....
		</text>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
const chartData = ref({})
const opts = ref({
	color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	padding: [15,15,0,15],
	enableScroll: false,
	legend: {},
	xAxis: {
	  disableGrid: true
	},
	yAxis: {
	  gridType: "dash",
	  dashLength: 2
	},
	extra: {
	  area: {
	    type: "straight",
	    opacity: 0.2,
	    addLine: true,
	    width: 2,
	    gradient: false,
	    activeType: "hollow"
	  }
	}
})

onLoad(() =>{
	getServerData()
})


const getServerData = ()=> {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["6:00","8:00","12:00","14:00","18:00","20:00"],
            series: [
              {
                name: "早",
                data: [35,8,25,37,4,20]
              },
              {
                name: "中",
                data: [70,40,65,100,44,68]
              },
              {
                name: "晚",
                data: [100,80,95,150,112,132]
              }
            ]
          };
        chartData.value = JSON.parse(JSON.stringify(res));
      }, 500);
    }
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>